<template>
    <div class="container">
        <a-form ref="formStateRef" :model="formState" autocomplete="off" layout="horizontal" labelWrap labelAlign="right" :label-col="{ span: 4 }">
            <a-tabs v-model:activeKey="active">
                <a-tab-pane key="basic" :tab="_t('general.config.basic')">
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="SiteName" :label="_t('general.config.form.basic.site_name_label')">
                                    <a-input v-model:value="formState.site_name" :placeholder="_t('general.config.form.basic.site_name_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="SiteDescribe" :label="_t('general.config.form.basic.site_describe_label')">
                                    <a-input v-model:value="formState.site_describe" :placeholder="_t('general.config.form.basic.site_describe_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="Copyright" :label="_t('general.config.form.basic.copyright_label')">
                                    <a-input v-model:value="formState.copyright" :placeholder="_t('general.config.form.basic.copyright_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="Filings" :label="_t('general.config.form.basic.filings_label')">
                                    <a-input v-model:value="formState.filings" :placeholder="_t('general.config.form.basic.filings_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="Keywords" :label="_t('general.config.form.basic.keywords_label')">
                                    <a-input v-model:value="formState.keywords" :placeholder="_t('general.config.form.basic.keywords_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="Describe" :label="_t('general.config.form.basic.describe_label')">
                                    <a-textarea v-model:value="formState.describe" :placeholder="_t('general.config.form.basic.describe_placeholder')" ></a-textarea>
                                </a-form-item>
                            </template>
                        </iCol>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="ForbiddenIp" :label="_t('general.config.form.basic.forbidden_ip_label')" :help="_t('general.config.form.basic.forbidden_ip_help')">
                                    <a-textarea v-model:value="formState.forbidden_ip" :placeholder="_t('general.config.form.basic.forbidden_ip_placeholder')" > </a-textarea>
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                </a-tab-pane>
                <a-tab-pane key="dictionary" :tab="_t('general.config.dictionary')">
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="attachment_category" :label="_t('general.config.form.dictionary.attachment_category')">
                                    <a-button type="primary" @click="handleAddAttachmentCategory" style="margin-bottom: 10px;">
                                        <template #icon>
                                            <PlusOutlined />
                                        </template>
                                        {{ _t('general.config.form.dictionary.append') }}
                                    </a-button>
                                    <a-form-item-rest>
                                        <a-table :pagination="false" :columns="columns" :data-source="formState.attachment_category">
                                            <template #bodyCell="{ column, index, record }">
                                                <template v-if="column.key === 'value'">
                                                    <a-input v-model:value="record.value" :placeholder="_t('general.config.form.dictionary.table.key_placeholder')" />
                                                </template>
                                                <template v-if="column.key === 'title'">
                                                    <a-input v-model:value="record.title" :placeholder="_t('general.config.form.dictionary.table.value_placeholder')" />
                                                </template>
                                                <template v-if="column.key === 'operate'">
                                                    <a-flex gap="small" horizontal>
                                                        <iDelete @delete="handleDeleteAttachmentCategory(index)"></iDelete>
                                                    </a-flex>
                                                </template>
                                            </template>
                                        </a-table>
                                    </a-form-item-rest>
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                </a-tab-pane>
                <a-tab-pane key="email" :tab="_t('general.config.email')">
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="smtp" :label="_t('general.config.form.email.smtp_service_label')" :extra="_t('general.config.form.email.smtp_service_help')">
                                    <a-input v-model:value="formStateEmail.smtp" :placeholder="_t('general.config.form.email.smtp_service_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="port" :label="_t('general.config.form.email.port_label')" :extra="_t('general.config.form.email.port_help')">
                                    <a-input-number v-model:value="formStateEmail.port" :placeholder="_t('general.config.form.email.port_placeholder')" style="width: 100%;" />
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="account" :label="_t('general.config.form.email.account_label')" :extra="_t('general.config.form.email.account_help')">
                                    <a-input v-model:value="formStateEmail.account" :placeholder="_t('general.config.form.email.account_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="password" :label="_t('general.config.form.email.password_label')" :extra="_t('general.config.form.email.password_help')">
                                    <a-input-password v-model:value="formStateEmail.password" :placeholder="_t('general.config.form.email.password_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                    <a-row>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="sender_name" :label="_t('general.config.form.email.sender_name_label')" :extra="_t('general.config.form.email.sender_name_help')">
                                    <a-input v-model:value="formStateEmail.send_name" :placeholder="_t('general.config.form.email.sender_name_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                        <iCol>
                            <template #Content>
                                <a-form-item :colon="false" name="sender_email" :label="_t('general.config.form.email.sender_email_label')" :extra="_t('general.config.form.email.sender_email_help')">
                                    <a-input v-model:value="formStateEmail.send_email" :placeholder="_t('general.config.form.email.sender_email_placeholder')" />
                                </a-form-item>
                            </template>
                        </iCol>
                    </a-row>
                </a-tab-pane>
            </a-tabs>
            <a-row>
                <iCol>
                    <template #Content>
                        <a-form-item :colon="false" :label="isMobileFunc()?'':' '">
                            <a-flex gap="middle">
                                <a-button type="primary" @click="handleSave">{{ _t('common.Save') }}</a-button>
                                <a-button @click="handleReset">{{ _t('common.Reset') }}</a-button>
                                <a-button type="link" v-if="active == 'email'" @click="handleSendEmailOpen">{{ _t('general.config.form.email.send_email') }}</a-button>
                            </a-flex>
                        </a-form-item>
                    </template>
                </iCol>
            </a-row>
        </a-form>

        <a-drawer :title="_t('general.config.form.email.send_email')" rootClassName="full-modal-drawer" width="40%" :open="SendEmailVisible" @close="handleSendEmailClose()" :loading="SendEmailLoading">
            <div>
                <a-form ref="formDataForm" :model="formData" autocomplete="off" :rules="formDataRule" layout="vertical">
                    <a-form-item :colon="false" name="recipient" :label="_t('general.config.form.email.form.recipient_label')" :extra="_t('general.config.form.email.form.recipient_help')">
                        <a-textarea v-model:value="formData.recipient" :placeholder="_t('general.config.form.email.form.recipient_placeholder')"></a-textarea>
                    </a-form-item>
                    <a-form-item :colon="false" name="subject" :label="_t('general.config.form.email.form.subject_label')">
                        <a-input v-model:value="formData.subject" :placeholder="_t('general.config.form.email.form.subject_placeholder')"></a-input>
                    </a-form-item>
                    <a-form-item :colon="false" name="content" :label="_t('general.config.form.email.form.email_content_label')">
                        <a-textarea v-model:value="formData.content" :placeholder="_t('general.config.form.email.form.email_content_placeholder')"></a-textarea>
                    </a-form-item>
                </a-form>
            </div>
            <template #extra>
                <a-space>
                    <a-button @click="handleSendEmailClose()">{{ _t('common.Cancel') }}</a-button>
                    <a-button type="primary" @click="handleSumbitSendEmail()">{{  _t('common.Sending')  }}</a-button>
                </a-space>
            </template>
        </a-drawer>
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { _t } from "@/assets/lang/index.ts"
import type { TableColumnsType } from 'ant-design-vue';
import { FormInstance } from 'ant-design-vue';
import { iPb } from '@/protobuf/interface';
import { Message } from '@/tool/antdv';
import { SaveConfig, SendTestEmail } from '@/api/admin_config';
import { $Clone, isMobile as isMobileFunc } from '@/tool/function'
import { useStore } from '@/stores/index'
const store = useStore()
const formState = ref<iPb.IDbConfig>({})
const formStateEmail = ref<iPb.DbConfig.IEmail>({})
const SendEmailVisible = ref<boolean>(false)
const SendEmailLoading = ref<boolean>(false)
    
const active = ref<string>("basic")


const handleSave = () => {
    formState.value.email = formStateEmail.value
    SaveConfig(iPb.DbConfig.create(formState.value)).then((_result:iPb.Admin.ISaveConfigResponse) => {
        Message.success({
            content: _t('common.Message.SaveSuccess')
        })
        store.initConfig()
    })
}

const handleReset = () => {
    formState.value = iPb.DbConfig.create($Clone(store.Config))
    formStateEmail.value = formState.value.email!
}

const handleDeleteAttachmentCategory = (index:number) => {
    if(!formState.value.attachment_category || formState.value.attachment_category.length == 0) {
        return
    }
    formState.value.attachment_category.splice(index,1)
}

const handleAddAttachmentCategory = () => {
    if(!formState.value.attachment_category) {
        formState.value.attachment_category = []
    }
    if(formState.value.attachment_category && formState.value.attachment_category.length > 0) {
        let item = formState.value.attachment_category[formState.value.attachment_category.length - 1]
        if(!item.title || !item.value) {
            Message.error({
                content: _t('common.Message.FillMessage'),
            })
            return
        }
    }
    let obj: iPb.DbConfig.IDictionary = iPb.DbConfig.Dictionary.create()
    formState.value.attachment_category.push(obj)
}

const formData = ref<iPb.Admin.ISendTestEmailRequest>(iPb.Admin.SendTestEmailRequest.create())

const formDataRule = {
    recipient: [
        { required: true, message: _t('general.config.form.email.form.recipient_placeholder') }
    ],
    subject: [
        { required: true, message: _t('general.config.form.email.form.subject_placeholder') }
    ],
    content: [
        { required: true, message: _t('general.config.form.email.form.email_content_placeholder') }
    ],
}

const formDataForm = ref<FormInstance>()

const handleSumbitSendEmail = () => {
    formDataForm.value?.validate().then(() => {
        if(SendEmailLoading.value) {
            return
        }
        SendEmailLoading.value = true
        SendTestEmail(formData.value).then((_result: iPb.Admin.ISendTestEmailResponse) => {
            SendEmailLoading.value = false
            SendEmailVisible.value = false
            Message.success({
                content: _t('common.Message.SaveSuccess'),
            })
        }).catch(() => {
            SendEmailLoading.value = false
        })
    })
}

const handleSendEmailOpen = () => {
    formDataForm.value?.resetFields()
    formData.value = iPb.Admin.SendTestEmailRequest.create()
    SendEmailVisible.value = true
}

const handleSendEmailClose = () => {
    SendEmailVisible.value = false
}

const columns:TableColumnsType = [
    {
        title: _t('general.config.form.dictionary.table.key'),
        dataIndex: "value",
        width: 120,
        key: "value"
    },
    {
        title: _t('general.config.form.dictionary.table.value'),
        dataIndex: "title",
        width: 120,
        key: "title"
    },
    {
        title: _t('common.Operate'),
        dataIndex: "operate",
        width: 100,
        key: "operate"
    }
]

onMounted(() => {
    formState.value = $Clone(store.Config)
    formStateEmail.value = iPb.DbConfig.Email.create(formState.value.email!)
})

</script>

<style scoped lang="less">

</style>